<template>
  <!--通过选择医院和时间，产生一个排班表格-->
  <section>

    <el-row>
      <!--搜索、创建行-->
      <el-col :span="20">

        <el-form :inline="true" size="mini" ref="form" :model="form">
          <el-form-item  label="医院：">
            <!--医院列表-选择-->
            <el-select  v-model="form.hospitalId" placeholder="请选择">
              <el-option v-for="hospital in hospitalList" :key="hospital.id" :label="hospital.name" :value="hospital.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item >
            <!--时间选择-->
            <el-date-picker v-model="form.week" type="week" format="yyyy 第 WW 周 MM 月 dd 日" placeholder="选择周">
            </el-date-picker>
          </el-form-item>
        </el-form>

      </el-col>
      <!--<el-col :span="4">-->
      <!--<el-button style="margin-bottom: 20px;text-align: right" @click="creatRepertory">-->
      <!--<icon name="plus"></icon>-->
      <!--</el-button>-->
      <!--</el-col>-->
    </el-row>


    <el-table v-if="tableData && tableData.length>0 && dates.length>0" :data="tableData" style="width: 100%"  >
      <el-table-column>
        <el-table-column prop="hospital" label="医院">
        </el-table-column>
        <el-table-column prop="department.name" label="科室">
        </el-table-column>
      </el-table-column>
      <el-table-column v-for="date in dates" :key="date.week" :value="date.day" :label="date.day">
        <el-table-column :label="date.week">
          <el-table-column v-for="ban in date.bans" :key="ban" :value="ban" :label="ban" prop="repertory">

          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column v-for="(date,i1) in dates" :key="date.week" :value="date.day" :label="date.day">
        <el-table-column :label="date.week">
          <el-table-column v-for="(ban,i2) in date.ban" :key="ban" :value="ban" :label="ban">
            <template slot-scope="scope">
              <div  @click="showAddDialog(scope.row,i1*2+i2)" style="min-height:50px;cursor:pointer">
                <div v-if="scope.row.bans[i1*2+i2]">
                  <div v-for="(b,i3) in scope.row.bans[i1*2+i2]" class="item-box">
                    <div class="icon" @click.stop="remove(scope.row,i1*2+i2,i3)"><icon name="times" width="16" height="16"></icon></div>
                    <span>{{b.name}}+{{b.total}}</span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>

    </el-table>

    <el-dialog title="坐诊安排" :visible.sync="showDialog" width="480px">
      <el-form size="small" style="padding:0 40px;margin:0 auto;" label-width="80px">
        <el-form-item label="坐诊医生:">
          <el-select v-model="selDocForm.docId" placeholder="请选择医生">
            <el-option v-for="doctor in doctors" :label="doctor.doctor.name" :value="doctor.doctor.id" :key="doctor.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预  约  量:">
          <el-input v-model="selDocForm.total" style="width:120px;" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addDoctor">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex';
  import DateUtils from '@/common/DateUtils'
  import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue"
  import Vue from 'vue'
  //后续添加属性，需要vue联动

  export default {
    components: {ElInput},
    name: "repertory",
    data(){
      return {
        showDialog:false,
        doctors:[],
        form:{week:null},
        selDocForm:{
          record:null,
          pos:0,
          docId:null,
          total:20
        },
        tableData:[],
        hospitalList:[],
        departmentList:[],
        dates:[],
        rowspan:'',
        repertoryList:''
      }
    },
    watch:{
      selWeek(nv,ov){
        //制作新的 weeks
        this.dates.splice(0,this.dates.length)
        for(let i=0;i<7;i++){
          let sec = DateUtils.addDays(nv,i)
          let week = DateUtils.getDay(sec)
          let tmp = {day:DateUtils.format(sec,'yyyy-MM-dd'),week:week,bans:['上午','下午'],repertory:[]}
          this.dates.push(tmp)
        }
      },
      selHospital(nv,ov){
        this.getDepartmentList(nv)
      }
    },
    computed:{
      selWeek(){
        return this.form.week
      },
      selHospital(){
        return this.form.hospitalId
      }
    },
    created(){
      //加载科室列表
      // this.loadDepartmentList()
      //加载医院列表
      this.loadHospitalList()
      //加载医生列表
      this.getCustomerList(5)
      //加载已有排班
      this.getRepertoryList()
    },
    methods:{
      ...mapActions({
        fetch:'fetch'
      }),
      getRepertoryList(){
        this.fetch({name:"getRepertoryList"})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              this.repertoryList = res
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      remove(row,pos,index){
        row.bans[pos].splice(index,1)
      },
      showAddDialog(row,pos){
        // console.log(row)
        this.selDocForm.record=row
        this.selDocForm.pos=pos
        this.showDialog = true
      },
      addDoctor(){
        let date
        let time
        if(this.selDocForm.record){
          //求出日期
          let index = Math.floor(this.selDocForm.pos/2)
          if(index>=0){
            date = this.dates[index].day
          }
          //求出上下午
          if(this.selDocForm.pos%2 == 0){
            //偶数，上午
            time = 'A.M.'
          }else {
            time = 'P.M.'
          }
          let doc = this.doctors.find(d=>d.doctor.id===this.selDocForm.docId)
          if(doc){
            let data ={date:date,time:time,departmentId:this.selDocForm.record.department.id,doctorId:doc.doctor.id,total:this.selDocForm.total}
            // console.log(data)
            this.fetch({name:"createRepertory",data:data})
              .then((res)=>{
                if(res.errCode){
                  this.$message({type:'info',message:res.errMsg})
                }else{
                  // console.log(res)
                  console.log(this.selDocForm)
                  this.selDocForm.record.bans[this.selDocForm.pos].push({name:doc.doctor.name,total:this.selDocForm.total})
                  console.log(this.selDocForm)
                  this.showDialog = false
                }
              })
              .catch((err)=>{
                console.log(err)
                this.$message({type:'error',message:"服务器错误"})
              })
            // console.log('------------kankan table:----',this.tableData)
          }
        }
      },
      getCustomerList(id){
        this.fetch({name:"getCustomerList",data:{groupId:id}})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              // console.log(res)
              for(let i=0;i<res.length;i++){
                let tmp = res[i]
                this.doctors.push({doctor:tmp,amount:''})
                // console.log(this.doctors)
              }
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      getDepartmentList(hospitalId){
        this.fetch({name:"getDepartmentByHospital",data:{hospitalId:hospitalId}})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              this.rowspan = res.length
              let name = []
              for(let i=0;i<res.length;i++){
                let tmp = res[i]
                console.log(tmp)
                console.log(this.repertoryList)
                for(let j=0;j<this.repertoryList.length;j++){
                  if(this.repertoryList[j].departmentId === tmp.id){

                    name.push('"'+this.repertoryList[j].doctorName+'"-"'+this.repertoryList[j].total+'"')
                    console.log(name)

                  }
                }
                this.tableData.push({hospital:hospitalId,department:tmp,repertory:name,bans:[[],[],[],[],[],[],[],[],[],[],[],[],[],[]]})
                // this.tableData.push({hospital:hospitalId,department:tmp,repertory:["何博-20","张医生-20"],bans:[[],[],[],[],[],[],[],[],[],[],[],[],[],[]]})
              }
              console.log('---------插入的tableData--------------',this.tableData)
              console.log(this.selDocForm)
              // this.departmentList = res
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      loadHospitalList(){
        this.fetch({name:"getHospitalList"})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              this.hospitalList = res
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
    }
  }
</script>
<style lang="scss">

  .item-box{
    position: relative;
    line-height:24px;
    border:1px solid #777;
    .icon{
      width:16px;
      height:16px;
      color: red;
      top:4px;
      right: 0;
      position: absolute;
      display: none;
    }
    span{
      height:24px;
      line-height:24px;
    }
    &:hover{
      .icon{
        display: inline;
      }
    }
  }

</style>
